<template>
  <el-dialog
    v-el-drag-dialog
    :title="!dataForm.id ? '新增' : '详情'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="账号:">
            <span>{{dataForm.userName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="名称:">
            <span>{{dataForm.trueName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="操作类型:">
            <span v-if="dataForm.type === 0">收入</span>
            <span v-if="dataForm.type === 1">支出</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="状态:">
            <span v-if="dataForm.status === 1">已到账</span>
            <span v-if="dataForm.status === 2">即将到账</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="转账积分数量:">
            <span>{{dataForm.integral}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="操作后券数量:">
            <span>{{dataForm.currentIntegral}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="转账账号:">
            <span>{{dataForm.turnUserName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="转账名称:">
            <span>{{dataForm.turnTrueName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="收支种类:">
            <span v-if="dataForm.fromType === 1">充值</span>
            <span v-if="dataForm.fromType === 2">转账</span>
            <span v-if="dataForm.fromType === 3">消费</span>
            <span v-if="dataForm.fromType === 4">分佣</span>
            <span v-if="dataForm.fromType === 5">商城订单退券</span>
            <span v-if="dataForm.fromType === 6">联盟店订单退券</span>
            <span v-if="dataForm.fromType === 7">签到奖励</span>
            <span v-if="dataForm.fromType === 8">抽奖奖励</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="关联类型:">
            <span v-if="dataForm.relationType === 0">无关联类型</span>
            <span v-if="dataForm.relationType === 1">福利商城订单</span>
            <span v-if="dataForm.relationType === 2">联盟店线上订单</span>
            <span v-if="dataForm.relationType === 3">邀请注册</span>
            <span v-if="dataForm.relationType === 4">签到</span>
            <span v-if="dataForm.relationType === 5">抽奖</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="操作平台:">
            <span v-if="dataForm.operatingPlatform === 0">平台</span>
            <span v-if="dataForm.operatingPlatform === 1">后台</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="关联号:">
            <span v-if="dataForm.relationNo === '1'">无关联</span>
            <span v-if="dataForm.relationNo !== '1'">{{dataForm.relationNo}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="备注:">
            <span>{{dataForm.remark}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="时间:">
            <span>{{dataForm.addTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="dataForm.relationType === 1 || dataForm.relationType === 2">
        <el-table v-if="dataForm.list.length !== 0"
            :data="this.dataForm.list"
            border
            style="width: 100%">
            <el-table-column
              prop="img"
              label="商品图">
              <template slot-scope="scope">
                <el-popover
                  placement="right"
                  trigger="hover">
                  <img v-if="scope.row.img !== null" :src="'https://image.yilianbaihui.cn/consumer/' + scope.row.img" style="max-height: 100px;"/>
                  <img v-if="scope.row.img !== null" slot="reference" :src="'https://image.yilianbaihui.cn/consumer/' + scope.row.img" style="max-height: 50px;max-width: 130px">
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="商品名">
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格">
            </el-table-column>
            <el-table-column
              prop="giveIntegral"
              label="送积分">
            </el-table-column>
            <el-table-column
              prop="integral"
              label="积分购买价">
            </el-table-column>
            <el-table-column
              prop="date"
              label="时间">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="商家账号">
            </el-table-column>
            <el-table-column
              prop="trueName"
              label="商家名称">
            </el-table-column>
          </el-table>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dialogImageUrl: '',
        dialogVisible: false,
        dataForm: {
          id: 0,
          addTime: '',
          userId: '',
          integral: '',
          type: '',
          fromUserId: '',
          remark: '',
          fromType: '',
          relationNo: '',
          relationType: '',
          status: '',
          operatingPlatform: '',
          currentIntegral: '',
          userName: '',
          trueName: '',
          turnUserName: '',
          turnTrueName: '',
          list: []
        },
        dataRule: {}
      }
    },
    methods: {
      init (id) {
        this.dataForm.relationType = ''
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/member/revenueLog/getRevenueLogDetails/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.addTime = data.data.addTime
                this.dataForm.userId = data.data.userId
                this.dataForm.integral = data.data.integral
                this.dataForm.type = data.data.type
                this.dataForm.fromUserId = data.data.fromUserId
                this.dataForm.remark = data.data.remark
                this.dataForm.fromType = data.data.fromType
                this.dataForm.relationNo = data.data.relationNo
                this.dataForm.relationType = data.data.relationType
                this.dataForm.status = data.data.status
                this.dataForm.operatingPlatform = data.data.operatingPlatform
                this.dataForm.currentIntegral = data.data.currentIntegral
                this.dataForm.userName = data.data.userName
                this.dataForm.trueName = data.data.trueName
                this.dataForm.turnUserName = data.data.turnUserName
                this.dataForm.turnTrueName = data.data.turnTrueName
                this.dataForm.list = data.data.list
              }
            })
          }
        })
      }
    }
  }
</script>
